<template>
    <div class="mod-prod-info">
        <el-form :model="dataForm"
                 label-width="100px"
                 ref="dataForm">
            <el-form-item label="产品图片">
                <mul-pic-upload v-model="dataForm.imgs"/>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="dataForm.status">
                    <el-radio :label="1">上架</el-radio>
                    <el-radio :label="0">下架</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item :rules="[{ required: true, message: '请选择产品分类'}]"
                          label="产品分类"
                          prop="categoryId">
                <el-col :span="8">
                    <el-cascader :options="category.list"
                                 :props="category.props"
                                 @change="handleCategoryChange"
                                 change-on-select
                                 expand-trigger="hover"
                                 v-model="category.selected">
                    </el-cascader>
                </el-col>
            </el-form-item>
            <el-form-item :rules="[{ required: true, message: '请选择产品分组'}]" label="产品分组">
                <el-col :span="8">
                    <el-select multiple
                               placeholder="请选择"
                               style="width: 250px"
                               v-model="dataForm.tagList">
                        <el-option :key="item.id"
                                   :label="item.title"
                                   :value="item.id"
                                   v-for="item in this.tags">
                        </el-option>
                    </el-select>
                </el-col>
            </el-form-item>
            <el-form-item :rules="[
                      { required: true, message: '产品名称不能为空'},
                      { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的产品名称', trigger: 'blur' }
                    ]"
                          label="产品名称"
                          prop="prodName">
                <el-col :span="8">
                    <el-input maxlength="50"
                              placeholder="产品名称"
                              v-model="dataForm.prodName"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item :rules="[
                      { required: false, pattern: /\s\S+|S+\s|\S/, message: '请输入正确的产品卖点', trigger: 'blur' }
                    ]"
                          label="产品卖点" prop="brief">
                <el-col :span="8">
                    <el-input :autosize="{minRows: 2, maxRows: 4}"
                              placeholder="产品卖点"
                              type="textarea"
                              v-model="dataForm.brief"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="配送方式">
                <el-checkbox v-model="dataForm.deliveryMode.hasShopDelivery">商家配送</el-checkbox>
                <el-checkbox v-model="dataForm.deliveryMode.hasUserPickUp">用户自提</el-checkbox>
            </el-form-item>
            <prod-transport v-model="dataForm.deliveryTemplateId"
                            v-show="dataForm.deliveryMode.hasShopDelivery"></prod-transport>
            <sku-tag :skuList="dataForm.skuList"
                     @change="skuTagChangeSkuHandler"
                     ref="skuTag"></sku-tag>
            <sku-table :prodName.sync="dataForm.prodName"
                       ref="skuTable"
                       v-model="dataForm.skuList"></sku-table>

            <el-form-item label="产品详情"
                          prop="content">
                <tiny-mce ref="content"
                          style="width:1000px"
                          v-model="dataForm.content"></tiny-mce>
            </el-form-item>
            <el-form-item>
                <el-button @click="dataFormSubmit()"
                           type="primary">确定
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {idList, treeDataTranslate} from '@/utils'
    import MulPicUpload from '@/components/mul-pic-upload'
    import ProdTransport from './prod-transport'
    import SkuTag from './sku-tag'
    import SkuTable from './sku-table'
    import TinyMce from '@/components/tiny-mce'
    import {Debounce} from '@/utils/debounce'

    export default {
        data() {
            return {
                // 分类树展示与回显
                category: {
                    list: [],
                    selected: [],
                    props: {
                        value: 'categoryId',
                        label: 'categoryName'
                    }
                },
                // 规格列表
                dataForm: {
                    prodName: '',
                    brief: '',
                    pic: '',
                    imgs: '',
                    categoryId: 0,
                    prodId: 0,
                    skuList: [],
                    tagList: [],
                    content: '',
                    status: 1,
                    deliveryMode: {
                        hasShopDelivery: false,
                        hasUserPickUp: false
                    },
                    deliveryTemplateId: null
                },
                tags: [],
                resourcesUrl: process.env.VUE_APP_RESOURCES_URL
            }
        },
        components: {
            MulPicUpload,
            ProdTransport,
            TinyMce,
            SkuTag,
            SkuTable
        },
        computed: {
            defalutSku() {
                return this.$store.state.prod.defalutSku
            }
        },
        activated() {
            this.dataForm.prodId = this.$route.query.prodId
            this.getDataList()
        },
        methods: {
            // 获取分类数据
            getDataList() {
                this.getTagList()
                this.getCategoryList().then(() => {
                    if (this.dataForm.prodId) {
                        // 获取产品数据
                        this.$http({
                            url: this.$http.adornUrl(`/prod/prod/info/${this.dataForm.prodId}`),
                            method: 'get',
                            params: this.$http.adornParams()
                        }).then(({data}) => {
                            this.dataForm = data
                            this.dataForm.deliveryMode = JSON.parse(data.deliveryMode)
                            this.$refs.skuTag.init(data.skuList)
                            this.$refs.skuTable.init()
                            this.category.selected = idList(this.category.list, this.dataForm.categoryId, 'categoryId', 'children').reverse()
                            this.dataForm.tagList = data.tagList
                        })
                    } else {
                        this.$nextTick(() => {
                            this.$refs['dataForm'].resetFields()
                            this.$refs.skuTag.init()
                            this.dataForm.pic = ''
                            this.dataForm.imgs = ''
                        })
                    }
                })
            },
            // 获取分类信息
            getCategoryList() {
                return this.$http({
                    url: this.$http.adornUrl('/prod/category/listCategory'),
                    method: 'get',
                    params: this.$http.adornParams()
                }).then(({data}) => {
                    this.category.list = treeDataTranslate(data, 'categoryId', 'parentId')
                })
            },
            // 选择分类改变事件
            handleCategoryChange(val) {
                this.dataForm.categoryId = val[val.length - 1]
            },
            // 表单提交
            dataFormSubmit: Debounce(function () {
                this.$refs['dataForm'].validate((valid) => {
                    if (!valid) {
                        return
                    }
                    if (!this.dataForm.imgs) {
                        this.errorMsg('请选择图片上传')
                        return
                    }
                    if (!this.dataForm.deliveryMode) {
                        this.errorMsg('请选择配送方式')
                        return
                    }
                    if (this.dataForm.deliveryMode.hasShopDelivery && !this.dataForm.deliveryTemplateId) {
                        this.errorMsg('请选择运费模板')
                        return
                    }
                    let param = Object.assign({}, this.dataForm)
                    // 设置价格和库存
                    this.paramSetPriceAndStocks(param)

                    param.deliveryMode = undefined
                    param.deliveryModeVo = this.dataForm.deliveryMode
                    // 商品主图
                    param.pic = this.dataForm.imgs.split(',')[0]
                    this.$http({
                        url: this.$http.adornUrl(`/prod/prod`),
                        method: param.prodId ? 'put' : 'post',
                        data: this.$http.adornData(param)
                    }).then(({data}) => {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.visible = false
                                this.$store.commit('common/removeMainActiveTab')
                                this.$router.push({name: 'prod-prodList'})
                                this.$emit('refreshDataList')
                            }
                        })
                    })
                })
            }),
            paramSetPriceAndStocks(param) {
                // 获取规格属性信息
                // param.skuList = this.$refs.prodSpec.getTableSpecData()
                // 商品库存
                param.totalStocks = 0
                // 商品价格
                param.price = 0
                // 商品原价
                param.oriPrice = 0
                // 商品实际库存
                for (let i = 0; i < param.skuList.length; i++) {
                    const element = param.skuList[i]
                    if (element.status !== 1) {
                        continue
                    }
                    if (param.price === 0) {
                        param.price = element.price ? Number.parseFloat(element.price) : 0
                    }
                    // 商品价格为最低价的那件商品的价格
                    param.price = Math.min(param.price, element.price)
                    if (param.price === element.price) {
                        param.oriPrice = element.oriPrice ? Number.parseFloat(element.oriPrice) : 0
                    }
                    param.totalStocks += element.stocks ? Number.parseInt(element.stocks) : 0
                }
                // 如果sku没有商品名称，则使用商品的商品名称
                if (param.skuList.length === 1) {
                    param.skuList[0].prodName = this.dataForm.prodName
                }
            },
            skuTagChangeSkuHandler(skuList) {
                const prodName = this.dataForm.prodName
                skuList.forEach(sku => {
                    if (sku.properties) {
                        sku.skuName = ''
                        let properties = sku.properties.split(';')
                        for (const propertiesKey in properties) {
                            sku.skuName += properties[propertiesKey].split(':')[1] + ' '
                        }
                        sku.prodName = prodName + ' ' + sku.skuName
                    }
                })
                this.dataForm.skuList = skuList
            },
            errorMsg(message) {
                this.$message({
                    message: message,
                    type: 'error',
                    duration: 1500
                })
            },
            // 获取所有的分组信息
            getTagList() {
                this.$http({
                    url: this.$http.adornUrl('/prod/prodTag/listTagList'),
                    method: 'get',
                    params: this.$http.adornParams()
                }).then(({data}) => {
                    this.tags = data
                })
            }
        }
    }
</script>
